<template>
	<view class="all">
		<view class="wrap" :style="{
			'margin-top': $top+'px'
		}">
			<view>
				<image class="wrap23" @click="gow" src="https://s4.ax1x.com/2022/01/26/7qsYgs.png"
					style="width: 22rpx; height: 44rpx" />
			</view>
			<swiper @change="swiperChange" class="swiper" :duration="500" :current='current' autoplay circular>
				<swiper-item v-for="(item,index) in list">
					<image :src="item.image" style="width: 100%;height: 100%" />
				</swiper-item>
			</swiper>
			<view class="wrap_2">
				<text>{{current+1}}</text>
				<text>/</text>
				<text>{{list.length}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				list: [{
						image: 'https://s4.ax1x.com/2022/01/26/7qwVaQ.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://s4.ax1x.com/2022/01/26/7qwVaQ.png',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://s4.ax1x.com/2022/01/26/7qwVaQ.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			};
		},
		onPageScroll(res) {

		},
		methods: {
			//轮播图的切换事件  
			swiperChange(e) {
				this.current = e.target.current //获取当前轮播图片的下标, 可以给当前指示点加样式
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		position: relative;
		height: 790rpx;

		.wrap23 {
			margin-left: 20rpx;
			position: absolute;
			z-index: 9999
		}

		.wrap_2 {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(19, 19, 20, 0.2);
			color: white;
			padding: 5rpx 25rpx 5rpx 25rpx;
			border-radius: 50rpx;

			text:nth-of-type(3) {
				font-size: 20rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				line-height: 0px;
				color: #FFFFFF;
				opacity: 1;
			}

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				line-height: 0px;
				color: #FFFFFF;
				opacity: 1;
			}
		}

		.swiper {
			height: 100%
		}

	}
</style>
